import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:provider/provider.dart';
void main() => runApp(MaterialApp(
      home: Home(),
      debugShowCheckedModeBanner: false,
    ));

class Home extends StatefulWidget {
  @override
  _HomeState createState() {
    // TODO: implement createState
    return _HomeState();
  }
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      body: SingleChildScrollView(
        child: ChangeNotifierProvider(
          builder: (context)=>Bloc(),
          child: Column(
            children: <Widget>[
              HomeScreenTopPart(),
              HomeScreenBottomPart()
              ],
          ),
        ),
      ),
    );
  }
}

class HomeScreenTopPart extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    var bloc=Provider.of<Bloc>(context);
    return Container(
      height: 420.0,
      child: Stack(
        children: <Widget>[
          ClipPath(
            clipper: MyCliper(),
            child: Container(
              height: 370.0,
              decoration: BoxDecoration(color: Colors.white, boxShadow: [
                BoxShadow(
                    color: Colors.black12,
                    offset: Offset(0.0, 10.0),
                    blurRadius: 10.0)
              ]),
              child: Stack(
                children: <Widget>[
                  Image.asset(
                        bloc.src[bloc._currentPage],
                        fit: BoxFit.cover,
                        width: double.infinity,
                      ),
                  Container(
                    height: double.infinity,
                    width: double.infinity,
                    decoration: BoxDecoration(
                      gradient: LinearGradient(
                        colors: [
                          Color(0x00000000),
                          Color(0xD9333333)
                        ],
                        stops: [
                          0.0,
                          1.0
                        ],
                        begin: FractionalOffset(0.0,0.0),
                        end: FractionalOffset(0.0,1.0)
                      )
                    ),
                    child: Padding(
                      padding: EdgeInsets.only(top: 140.0,left: 100),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Text("《${bloc.title[bloc._currentPage]}》",
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 15.0,
                            fontFamily: "SF-Pro-Display-Bold"
                          ),
                          ),
                          Text("${bloc.desc[bloc._currentPage]}",
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 45.0,
                            fontFamily: "SF-Pro-Display-Bold"
                          ),
                          ),
                        ],
                      ),
                    ),
                  )
                ],
              ),
            ),
          ),
          Positioned(
            top: 370.0,
            right: -25.0,
            child: FractionalTranslation(
              translation: Offset(0.0,-0.5),
              child: Row(
                children: <Widget>[
                  FloatingActionButton(
                    backgroundColor: Colors.white,
                    child: Icon(Icons.add,color: Color(0xFFE52020),),
                    onPressed: (){},
                  ),
                  SizedBox(
                    width: 12,
                  ),
                  ClipRRect(
                    borderRadius: BorderRadius.circular(25.0),
                    child: RaisedButton(
                      color: Color(0xFFE52020),
                      padding: EdgeInsets.symmetric(
                        vertical: 15.0,
                        horizontal: 80.0
                      ),
                      child: Row(
                        children: <Widget>[
                          Text("马上观看",
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 15.0,
                            fontFamily:"SF-Pro-Display-Bold" 
                          ),
                          ),
                          SizedBox(
                            width: 10.0,
                          ),
                          RotatedBox(
                            quarterTurns: 2,
                            child: Icon(Icons.arrow_back,
                              size: 15.0,
                              color: Colors.white,
                              ),
                          )
                        ],
                      ),
                      onPressed: (){},
                    ),
                  )
                ],
              ),
            )
          )
        ],
      ),
    );
  }
}

class HomeScreenBottomPart extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      child: Column(
        children: <Widget>[
          Container(
            margin: EdgeInsets.only(left: 120,right: 40),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Text("现在观看",style: TextStyle(
                  fontSize: 18.0,
                  fontWeight: FontWeight.w700
                ),
                ),
                Text("查看更多",style: TextStyle(
                  fontSize: 12.0,
                  color: Colors.grey
                ),
                ),
              ],
            ),
          ),
          Container(
            margin: EdgeInsets.only(top: 25),
            padding: EdgeInsets.only(bottom: 20),
            height: 180,
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemBuilder: (context,index){
                return MovieItem(index: index,);
              },
              itemCount: 6,
            )
          )
        ],
      ),
    );
  }
}

class MovieItem extends StatelessWidget{
  int index;
  MovieItem({this.index});
  @override
  Widget build(BuildContext context) {
  var bloc=Provider.of<Bloc>(context);    
    // TODO: implement build
    return GestureDetector(
      onTap: (){
        bloc.changeCurrentPage(index);
        print("${bloc._currentPage},${index}");
      },
      child: Container(
        margin: EdgeInsets.only(left: index==0?120:10,right: 10,bottom: 15),
        width: 100,
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(15),
          boxShadow: [
            BoxShadow(
              offset: Offset(0.5,5.0),
              color: Colors.black12,
              blurRadius: 5.0
            )
          ]
        ),
        child: Column(
          children: <Widget>[
            ClipRRect(
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(15),
                topRight: Radius.circular(15),
              ),
              child: Image.asset(bloc.src[index],width: 100,height:120,fit: BoxFit.cover,),
              ),
              Container(
                margin: EdgeInsets.only(top: 5),
                alignment: Alignment.center,
                child: Text(bloc.title[index],style: TextStyle(
                fontSize: 12,
                fontWeight: FontWeight.w700
              ),
              ),
              )
          ],
        ),
      ),
    );
  }
}

class MyCliper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    // TODO: implement getClip
    var path = new Path();
    path.lineTo(0.0, size.height - 100.0);

    var controllerpoint = Offset(35.0, size.height);
    var endpoint = Offset(size.width / 3, size.height);

    path.quadraticBezierTo(
        controllerpoint.dx, controllerpoint.dy, endpoint.dx, endpoint.dy);

    path.lineTo(size.width, size.height);
    path.lineTo(size.width, 0.0);

    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    // TODO: implement shouldReclip
    return true;
  }
}

  
class Bloc with ChangeNotifier{
  List<String> src=[
    "images/pic1.jpg",
    "images/avenger.png",
    "images/dy.png",
    "images/lldq.png",
    "images/lps.png",
    "images/runways.png",
  ];
  List<String> title=[
    "切尔诺贝利",
    "复仇者联盟",
    "毒液",
    "流浪地球",
    "绿皮书",
    "离家联盟",
  ];
  List<String> desc=[
    "Chernobyl: Life in the Dead Zone",
    "The Avengers:EndGame",
    "致命守护者",
    "The Wandering Earth",
    "Green Book",
    "RunAways:Season2",
  ];
  int _currentPage=0;
  void changeCurrentPage(index){
    _currentPage=index;
    notifyListeners();
  }
  
}
class CurrentPage with ChangeNotifier{
  int _currentPage=0;
  changePage(index){
    _currentPage=index;
    notifyListeners();
  }
}